<template>
    <div>
        <el-table
                :data="tableData"
                border
                style="width: 100%">
            <el-table-column
                    fixed
                    label="编号"
                    prop="id">
            </el-table-column>
            <el-table-column
                    label="书名"
                    prop="name">
            </el-table-column>
            <el-table-column
                    label="作者"
                    prop="author">
            </el-table-column>

            <el-table-column
                    fixed="right"
                    label="操作"
                    width="100">
                <template slot-scope="scope">
                    <el-button @click="edit(scope.row)" size="small" type="text">修改</el-button>
                    <el-button @click="deletebook(scope.row)" size="small" type="text">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination
                :total=total
                background
                layout="prev, pager, next"
                :page-size="pageSize"
                @current-change="page">
        </el-pagination>
    </div>
</template>

<script>
    export default {
        methods: {
            deletebook(row){
                const _this=this
                axios.delete('http://localhost:8181/book/deleteById/'+row.id).then(function (resp) {
                     _this.$alert('《'+row.name+'》删除成功！', '消息', {
                        confirmButtonText: '确定',
                        callback: action => {
                           window.location.reload()
                        }
                    })
                })
            },
            edit(row){
                this.$router.push({
                    path:'/update',
                    query:{
                        id:row.id
                    }
                })
            },
            page(currentpage){
                const _this=this
                axios.get('http://localhost:8181/book/findAll/'+(currentpage-1)+'/6').then(function (resp) {
                    _this.tableData=resp.data.content
                    _this.total=resp.data.totalElements
                })
            }
        },
        created(){
            const _this=this
            axios.get('http://localhost:8181/book/findAll/0/6').then(function (resp) {
                _this.tableData=resp.data.content
                _this.total=resp.data.totalElements
                _this.pageSize = resp.data.size
            })
        },
        data() {
            return {
                total:null,
                tableData: null
            }
        }
    }
</script>
